<template>
  <!-- 购物车页面 -->
  <div class="box">
    <!-- 头部导航 -->
    <nav>
      <div></div>
      <!-- 实时获取商品种类数量 -->
      <div>购物车（{{cartNum}}）</div>
      <div>
        <!-- 判断是否登录决定是否显示 -->
        <i @click="gotoHome" class="iconfont icon-shouye1"></i>
        <div v-if="islogin" @click="gotoLogin">登录</div>
      </div>
    </nav>
    <!-- 当购物车数据为0时显示此页面 -->
    <div v-if="cartNum == 0" class="empty">
      <div>
        <img src="../../assets/img/cart.png" alt />
      </div>
      <div>购物车空空如也，赶紧去逛逛吧！</div>
      <div @click="gotoHome">去逛逛</div>
    </div>
    <!-- 引入CartList组件 并渲染 -->
    <CartList class="list" v-else></CartList>
  </div>
</template>

<script>
// 引入iconfont的样式 使用图标
import "../../assets/iconfont/iconfont.css";
// 引入购物车的列表项
import CartList from "../../components/CartList";

export default {
  data() {
    return {
      isshow: true, // 是否展示
      islogin: true, // 是否登录
    };
  },
  components: {
    CartList, // 注册组件
  },
  computed: {
    // 监听购物车种类数量
    cartNum() {
      return this.$store.state.cart.cartData.length;
    },
  },
  created() {
    // 设置底部导航的显示
    this.$bus.$emit("FooterBar", true);
  },
  mounted() {
    // console.log(this.$store.getters['cart/cartTotal'])
    // 根据是否有token（登录即有token）而显示登录
    var token = localStorage.getItem("isLogin");
    if (token) {
      this.islogin = false;
    }
  },
  methods: {
    // 跳转到首页
    gotoHome() {
      this.$router.push("/home");
    },
    // 跳转到登录页面
    gotoLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  margin-bottom: 100px;
  overflow: hidden;

  .list {
    margin-top: 48px;
  }
  nav {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    div:nth-child(1) {
      margin: 0 40px;
    }
    div:nth-child(2) {
      font-size: 18px;
      color: #333;
    }
    div:nth-child(3) {
      display: flex;
      i {
        color: #e31436;
        font-size: 22px;
        margin-top: 1px;
        // margin-right: 10px;
      }
      div {
        margin: 0 10px;
        width: 38px;
        line-height: 14px;
        padding: 5px 0;
        text-align: center;
        color: #e31436;
        border: 1px solid;
        border-radius: 3px;
        font-size: 10px;
      }
    }
  }
  .empty {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // margin-top: 0;
    // background: chocolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    div:nth-child(1) {
      width: 110px;
      height: 110px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    div:nth-child(2) {
      font-size: 15px;
      color: #333;
      margin: 22px 0;
    }
    div:nth-child(3) {
      width: 132px;
      height: 44px;
      background-color: #e31436;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
    }
  }
}
</style>
